<!-- 探索更多AI功能 -->
<template>
  <div class="moreAiFeature" @click="gotoStepDetail">
    <!-- <div class="top_box">
      <img src="@/assets/images/pic@2x (1).png" />
      <img src="@/assets/images/pic@2x (2).png" />
      <img src="@/assets/images/pic@2x.png" />
    </div> -->
    <video class="my-video" width="100%" autoplay muted loop playsinline>
      <source src="../assets/videos/aipose.webm" type="video/webm">
    </video>
    <h2 class="title">AI Pose</h2>
    <p class="des">Just one portrait Generate photos with sexy poses</p>
  </div>
  <div class="featureListWrap" @click="gotoStepDetail" v-if="false">
    <FeatureListComponent />
  </div>
</template>

<script setup>
import FeatureListComponent from "@/components/FeatureLists.vue";
import { useRouter } from "vue-router";
// defineProps({
//   msg: {
//     type: String,
//     required: true,
//   },
// })
const router = useRouter();
const gotoStepDetail = () => {
  router.push("./createStep");
};
</script>

<style scoped lang="less">
.moreAiFeature {
  background: #fff;
  margin-bottom: 30px;
  overflow: hidden;

  .top_box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      // flex: 1;
      width: 33.33%;
      height: auto;
      margin: 0;
    }
  }

  .title {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    margin-top: 8px;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.95);
    text-align: center;
  }

  .des {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.95);
    text-align: center;
  }
}

.featureListWrap {
  margin-top: 24px;
}
</style>
